<form method="post">
    <div style="margin: 10px 20px 30px 0px">
        {#  csrf_token的本质作用就是混淆发送给后端的参数#}
        {{form.csrf_token}}
    主机名：{{form.tag_id}}
         ip地址：{{form.ip}}
    {{form.submit}}
</div>
</form>
  <script>
        function selected() {
        var obj = document.getElementById("tag_id"); //定位id
        var index = obj.selectedIndex; // 选中索引
        var text = obj.options[index].text; // 选中文本
        var value = obj.options[index].value; // 选中值
        document.getElementById("ip").value=value;
        document.cookie="ip="+value
        document.cookie="host="+text
        sessions(text,value)
}
</script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<script>
    function sessions(host,ip) {
      $(function () {

          Highcharts.setOptions({
              global: {
                  useUTC: true
              }
          });
          $.getJSON('/sessions', function (data) {
              var sess = data.sessions
              var proes = data.processes

              var sessions = new Array();
              var processes = new Array();
              var data1 = new Array();
              var data2 = new Array();

              for (var i = 0; i < sess.length; i++) {
                      sessions.push(sess[i])
                      processes.push(proes[i])
                      data1.push(sess[i][1])
                      data2.push(proes[i][1])

              }
                //最新
                document.getElementById("last1").innerText=sessions[sessions.length - 1][1].toFixed(2)
                document.getElementById("last2").innerText=sessions[sessions.length - 1][1].toFixed(2)

                //最小
                document.getElementById("min1").innerText=Math.min.apply(null, data1).toFixed(2)
                document.getElementById("min2").innerText=Math.min.apply(null, data2).toFixed(2)
                //最大
                document.getElementById("max1").innerText=Math.max.apply(null, data1).toFixed(2)
                document.getElementById("max2").innerText=Math.max.apply(null, data2).toFixed(2)
                //平均
                document.getElementById("avg1").innerText=average(sessions).toFixed(2)
                document.getElementById("avg2").innerText=average(processes).toFixed(2)

                 document.getElementById("info").style.display='';
              $('#container').highcharts('StockChart', {
                          legend: {
                              enabled: true,
                              layout: 'vertical',
                              align: 'left',
                              verticalAlign: 'middle',
                              backgroundColor: '#000000',
                              borderColor: 'black',
                              borderWidth: 2,
                              shadow: true
                          },

                        rangeSelector: {
                              buttons: [{
                                  count: 5,
                                  type: 'minute',
                                  text: '5分钟'
                              }, {
                                  count: 1,
                                  type: 'hour',
                                  text: '1小时'
                              }, {
                                  count: 2,
                                  type: 'hour',
                                  text: '2小时'
                              },{
                                  count: 1,
                                  type: 'day',
                                  text: '1天'
                              },{
                                  count: 2,
                                  type: 'day',
                                  text: '2天'
                              }, {
                                  type: 'all',
                                  text: 'All'
                              }],
                              inputEnabled: true,
                              selected: 2
                          },


                          title: {
                              text: 'Session和Processes监控(个数)'
                          },
                        subtitle: {
                             text: host+'/'+ip,
                            style:{
                                 color:'#00CED1'
                             }
                          },
                          xAxis: {
                              title: {
                                  text: 'time'
                              },
                              type: 'datetime',
                              tickPixelInterval: 50
                          },

                          yAxis: [{
                              title: {
                                  text: ''
                              },
                              plotLines: [{
                                  value: 0,
                                  width: 1,
                                  color: '#808080'
                              }]
                          }],

                          exporting: {
                              enabled: true
                          },

                          series: [{
                              name: 'sessions',
                              type: 'spline',
                              data: sessions
                          }, {
                              name: 'processes',
                              type: 'spline',
                              data: processes
                          }]
                      }
              );
          });
      })

  }
</script>

<div style="min-width:400px;height:400px;top: 280px;display: none;font-family: Verdana,Arial,sans-serif;font-size: 11px;color: #333333;border-width: 1px" id="info" >
<table width="400" >
  <tr>
    <th align="left"></th>
    <th>最新/个</th>
    <th>最小/个</th>
    <th>平均/个</th>
    <th>最大/个</th>
  </tr>
  <tr>
    <td width="80" style="border-right-style:none;" >sessions:</td>
    <td width="60" style="border-right-style:none" id="last1"></td>
    <td width="60" style="border-right-style:none" id="min1"></td>
    <td width="60" style="border-right-style:none" id="avg1"></td>
    <td width="60" style="border-right-style:none" id="max1"></td>
  </tr>
    <tr>
    <td width="80" style="border-right-style:none">processes:</td>
    <td width="60" style="border-right-style:none" id="last2"></td>
    <td width="60" style="border-right-style:none" id="min2"></td>
    <td width="60" style="border-right-style:none" id="avg2"></td>
    <td width="60" style="border-right-style:none" id="max2"></td>
  </tr>
</table>
</div>



